<!--系统管理 --- 组织机构 --- 系统功能 -->
<template>
  <div class="department deleteDataMessage">
    <!-- 左侧部门管理 -->
    <div class="structureTree">
      <div class="structureTree_title">
        <div>功能目录</div>
      </div>
      <el-tree
        ref="tree"
        :data="treeData"
        :highlight-current="highlightBd"
        :props="defaultProps"
        @node-click="handleNodeClick"
        node-key="fModuleid"
        :accordion="true"
        :expand-on-click-node="false"
        :default-expanded-keys="expandedKeys"
      ></el-tree>
    </div>
    <!-- 右侧 -->
    <div class="department_right">
      <!-- 机构名称 -->
      <div class="department_right_name">
        <div>功能目录--{{ showName }}</div>
      </div>
      <!-- 顶部导航栏 -->
      <div class="mechanism_nav">
        <!-- 左侧 -->
        <div class="mechanism_nav_left"></div>
        <!-- 顶部按钮 -->
        <div class="print">
          <div class="printTable">
            <el-button
              type="primary"
              icon="el-icon-refresh"
              size="small"
              @click="getBaseModuleList(fModuleid)"
            >
            </el-button>
            <el-button
              type="primary"
              icon="el-icon-circle-plus-outline"
              size="small"
              @click="getAdd(0)"
              >新增
            </el-button>
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="small"
              @click="getAdd(1)"
              >编辑
            </el-button>
            <el-button
              type="primary"
              icon="el-icon-delete"
              size="small"
              @click="rowDelete(itemModuleid)"
            >
              删除</el-button
            >
          </div>
        </div>
      </div>

      <!-- 表格 -->
      <div class="text_tables">
        <el-table
          ref="multipleTable"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.2)"
          @row-click="getRowInfo"
          :data="tableData"
          style="width: 100%"
          :height="tableHeight"
          stripe
          border
          highlight-current-row
          @current-change="rowChange"
        >
          <el-table-column fixed type="index" width="50" align="center">
          </el-table-column>
          <el-table-column prop="fEncode" label="编号" width="150">
            <!-- 超出鼠标滑过显示 -->
            <template slot-scope="scope">
              <div class="inline-block">
                <a href="javascript:;" :title="scope.row.fEncode">{{
                  scope.row.fEncode
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="fFullname" label="名称" width="150">
            <template slot-scope="scope">
              <div class="inline-block">
                <a href="javascript:;" :title="scope.row.fFullname">{{
                  scope.row.fFullname
                }}</a>
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="fIcon" label="图标" width="120">
                        <template slot-scope="scope">
                            <div class="inline-block">
                                <a href="javascript:;" :title="scope.row.fIcon">{{ scope.row.fIcon }}</a>
                            </div>
                        </template>
                                                                                                                                                                                                                                                                                                                                                </el-table-column> -->

          <el-table-column
            prop="fTarget"
            label="性质"
            width="80"
            align="center"
          >
            <template slot-scope="scope">
              <div class="inline-block">
                <a href="javascript:;" :title="scope.row.fTarget">{{
                  scope.row.fTarget
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="fAllowedit"
            label="是否是编辑页"
            width="100"
            align="center"
          >
            <!-- 1是2否 -->
            <template slot-scope="scope">
              <div class="inline-block">
                <a href="javascript:;" v-if="scope.row.fAllowedit == 1">是</a>
                <a href="javascript:;" v-if="scope.row.fAllowedit == 0">否</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="fAllowdelete"
            label="是否启用"
            width="80"
            align="center"
          >
            <template slot-scope="scope">
              <div class="inline-block">
                <a href="javascript:;" v-if="scope.row.fAllowdelete == 1">是</a>
                <a href="javascript:;" v-if="scope.row.fAllowdelete == 0">否</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="fOrder"
            label="排序号"
            width="60"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="fNote" label="备注" width="200">
            <template slot-scope="scope">
              <div class="inline-block">
                <a href="javascript:;" :title="scope.row.fNote">{{
                  scope.row.fNote
                }}</a>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 新增编辑弹框 -->
      <div class="Control-1 systeMuodel">
        <el-dialog
          :close-on-click-modal="false"
          :title="editDialog"
          v-dialogDrag
          :visible.sync="dialogTableVisible"
          v-loading="loadingDialog"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.2)"
        >
          <div
            class="dialogBody common"
            :style="{ height: dialogHeight }"
            style="position: relative"
          >
            <el-steps :active="active" finish-status="success" simple>
              <el-step title="系统功能"> </el-step>
              <el-step title="系统按钮"></el-step>
            </el-steps>
            <el-form
              :model="formData"
              v-show="actives == 1"
              :rules="rules"
              ref="formData"
            >
              <div class="tableRow">
                <el-form-item
                  label="模块编号"
                  prop="fEncode"
                  :label-width="formLabelWidth"
                >
                  <el-input
                    v-model="formData.fEncode"
                    autocomplete="off"
                    placeholder="请输入"
                  >
                  </el-input>
                </el-form-item>
                <el-form-item
                  label="模块名称"
                  prop="fFullname"
                  :label-width="formLabelWidth"
                >
                  <el-input
                    v-model="formData.fFullname"
                    autocomplete="off"
                    placeholder="请输入"
                  >
                  </el-input>
                </el-form-item>
              </div>
              <div class="tableRow">
                <el-form-item
                  label="模块性质"
                  prop="fTarget"
                  :label-width="formLabelWidth"
                >
                  <el-select
                    v-model="formData.fTarget"
                    placeholder="请选择"
                    @change="targetChnage"
                  >
                    <el-option
                      v-for="(item, index) in targetData"
                      :key="index"
                      :value="item"
                      :label="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="排序号"
                  prop="fOrder"
                  :label-width="formLabelWidth"
                >
                  <el-input
                    v-model="formData.fOrder"
                    autocomplete="off"
                    placeholder="请输入"
                  >
                  </el-input>
                </el-form-item>
              </div>
              <div class="tableRow">
                <el-form-item
                  label="是否可编辑"
                  prop="fAllowedit"
                  :label-width="formLabelWidth"
                >
                  <el-select v-model="formData.fAllowedit" placeholder="请选择">
                    <el-option
                      v-for="(item, index) in AllowData"
                      :key="index"
                      :value="item.index"
                      :label="item.name"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="是否启用"
                  prop="fAllowdelete"
                  :label-width="formLabelWidth"
                >
                  <el-select
                    v-model="formData.fAllowdelete"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="(item, index) in AllowData"
                      :key="index"
                      :value="item.index"
                      :label="item.name"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>

              <div class="tableRow" style="margin-top: 10px">
                <el-form-item
                  label="备注"
                  prop="fNote"
                  :label-width="formLabelWidth"
                >
                  <el-input
                    v-model="formData.fNote"
                    type="textarea"
                    :rows="4"
                    placeholder="请输入"
                    autocomplete="off"
                  >
                  </el-input>
                </el-form-item>
              </div>
            </el-form>
            <div v-show="actives == 2" class="samllDialog" id="samllDialog">
              <div class="print" style="margin: 45px 0 0px; height: 40px">
                <div class="printTable">
                  <el-button
                    type="primary"
                    icon="el-icon-circle-plus-outline"
                    size="small"
                    @click="getBtnAdd(0)"
                    >新增
                  </el-button>
                  <el-button
                    type="primary"
                    icon="el-icon-edit"
                    size="small"
                    @click="getBtnAdd(1)"
                    >编辑
                  </el-button>
                  <el-button
                    type="primary"
                    icon="el-icon-delete"
                    size="small"
                    @click="rowBtnDelete(rowBtnNum)"
                  >
                    删除</el-button
                  >
                </div>
              </div>
              <div class="systemTable" style="margin-top: 0px">
                <el-table
                  ref="multipleTable"
                  v-loading="loading"
                  element-loading-text="拼命加载中"
                  element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(0, 0, 0, 0.2)"
                  @row-click="getRowBtnInfo"
                  :row-class-name="tableRowClassName"
                  :data="formData.modulebuttonList"
                  style="width: 100%"
                  :height="systemTableHeight"
                  stripe
                  border
                  highlight-current-row
                  @current-change="rowChange"
                >
                  <!-- <el-table-column fixed type="index" width="50" align="center">

                                                                                                                                                                                                                                                                                                                                                                </el-table-column> -->
                  <el-table-column prop="fEncode" label="编码" width="150">
                    <!-- <template slot-scope="scope">
                                            <div class="inline-block">
                                                <el-input v-model="scope.row.fEncode"></el-input>
                                            </div>
                                                                                                                                                                                                                                                                                                                                                                    </template> -->
                  </el-table-column>
                  <el-table-column prop="fFullname" label="名称" width="150">
                    <!-- <template slot-scope="scope">
                                            <div class="inline-block">
                                                <el-input v-model="scope.row.fFullname"></el-input>
                                            </div>
                                                                                                                                                                                                                                                                                                                                                                    </template> -->
                  </el-table-column>
                  <el-table-column prop="fOrder" label="排序号" width="120">
                    <!-- <template slot-scope="scope">
                                            <div class="inline-block">
                                                <el-input v-model="scope.row.fOrder"></el-input>
                                            </div>
                                                                                                                                                                                                                                                                                                                                                                    </template> -->
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div class="newlyAdded_btn">
              <el-button type="warning" @click="prev" :disabled="prevStr"
                >上一步</el-button
              >
              <el-button type="warning" @click="next" :disabled="nextStr"
                >下一步</el-button
              >
              <el-button
                type="primary"
                @click="submitForm('formData')"
                :disabled="saveStr"
                >保存</el-button
              >
              <!-- <el-button type="warning" @click="resetForm('formData')">重置</el-button> -->
            </div>
          </div>
        </el-dialog>
      </div>
      <!-- 系统按钮弹框 -->
      <div class="Control-1 samllBtn">
        <el-dialog
          :close-on-click-modal="false"
          :title="editBtnDialog"
          v-dialogDrag
          :visible.sync="dialogBtnVisible"
          v-loading="loadingBtnDialog"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.2)"
        >
          <div
            class="dialogBody common"
            :style="{ height: dialogBtnHeight }"
            style="position: relative"
          >
            <el-form :model="formBtnData" :rules="ruleBtn" ref="formBtnData">
              <div class="tableRow">
                <el-form-item
                  label="按钮编码"
                  prop="fEncode"
                  :label-width="formLabelWidth"
                >
                  <el-input
                    @blur="onBlur($event, formBtnData.fEncode)"
                    v-model="formBtnData.fEncode"
                    autocomplete="off"
                    placeholder="请输入"
                  >
                  </el-input>
                </el-form-item>
              </div>
              <div class="tableRow">
                <el-form-item
                  label="按钮名称"
                  prop="fFullname"
                  :label-width="formLabelWidth"
                >
                  <el-input
                    v-model="formBtnData.fFullname"
                    autocomplete="off"
                    placeholder="请输入"
                  >
                  </el-input>
                </el-form-item>
              </div>
              <div class="tableRow">
                <el-form-item
                  label="排序号"
                  prop="fOrder"
                  :label-width="formLabelWidth"
                >
                  <el-input
                    v-model.number="formBtnData.fOrder"
                    οnkeyup="value=value.replace(/[^\d]/g,'')"
                    autocomplete="off"
                    placeholder="请输入"
                  >
                  </el-input>
                </el-form-item>
              </div>
              <div class="newlyAdded_btn">
                <el-button
                  type="primary"
                  @click="submitBtnForm('formBtnData')"
                  :disabled="savaBtn"
                  >保存
                </el-button>

                <el-button type="warning" @click="resetBtnForm('formBtnData')"
                  >重置</el-button
                >
              </div>
            </el-form>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getBaseModuleList, //功能目录列表
  getBaseModuleDetail, // 模块管理-详情接口
  getBaseModuleDelete, //模块管理删除
  getBaseModuleAdd, //新增
  // getBaseCompanyList,
  // getBaseDepartmentList,
  // addBaseDepartment,
  // getBaseDepartmentByFid,
  // delBaseDepartment,
} from "@/api/request.js";
export default {
  inject: ["reload"],
  name: "Home",
  data() {
    return {
      highlightBd: true,
      currentPage4: 4,
      checked: false, //查看下级
      showName: "未选择功能",
      fModuleid: "0", //模块id
      tableData: [], //表格数据列表
      loading: false,
      itemModuleid: "", //点击当前行id
      editDialog: null, //一级弹框title
      dialogTableVisible: false,
      loadingDialog: false,
      active: 0,
      actives: 1,
      targetData: ["iframe", "expand"],
      AllowData: [
        {
          name: "是",
          index: 1,
        },
        {
          name: "否",
          index: 0,
        },
      ],
      prevStr: true,
      nextStr: true,
      saveStr: true,
      systemTableHeight: "",
      dialogHeight: "",
      dialogBtnHeight: "", //系统按钮
      tableHeight: "100%",
      dialogBtnVisible: false, //系统按钮弹框
      loadingBtnDialog: false, //系统按钮loading
      editBtnDialog: null,
      BtnDetailId: "", //按钮列表当前行id

      rowBtnNum: null, //系统按钮当前rowIndex
      addNum: null,
      formBtnRowData: {},
      savaBtn: false, //是否可以保存

      expandedKeys: [],
      fId: null, //当前数据fId
      projectName: null, //项目名称

      fDepartmentid: "", //当前行部门id
      dialogFormVisible: false,
      // 新增
      dialogCheckVisible: false, //弹窗的显示隐藏
      loadingCheckDialog: false,

      rules: {
        fEncode: [
          { required: true, message: "请输入模块编号", trigger: "blur" },
        ],
        fFullname: [
          { required: true, message: "请输入模块名称", trigger: "blur" },
          { min: 1, max: 25, message: "最多输入25个文本", trigger: "blur" },
        ],
        fTarget: [
          { required: true, message: "请选择模块性质", trigger: "change" },
        ],
        fAllowedit: [
          { required: true, message: "请选择是否是编辑页", trigger: "change" },
        ],
        fAllowdelete: [
          { required: true, message: "请选择是否启用", trigger: "change" },
        ],
        fOrder: [{ required: true, message: "请输入排序号", trigger: "blur" }],
        fNote: [{ required: false, message: "请输入备注", trigger: "blur" }],
      },
      formData: {
        fModuleid: "", //模块主键id
        fParentid: "0", //上级id
        fEncode: "", //模块编码
        fFullname: "", //模块名称
        fIcon: "", //模块图标
        fTarget: "", //模块性质  iframe  expand
        fAllowedit: "", //是否是编辑页
        fAllowdelete: "", //是否启用
        fOrder: "", //排序号
        fNote: "",

        modulebuttonList: [
          //按钮数据集合
          // {
          //     fModulebuttonid: "",//按钮主键id
          //     fModuleid: "",//模块主键id
          //     fIcon: "",//按钮图标
          //     fEncode: "",//按钮编码
          //     fFullname: "",//按钮名称
          //     fOrder: "",//排序号
          // }
        ],
      },
      formBtnData: {
        fModulebuttonid: "", //按钮主键id
        fModuleid: "", //模块主键id
        fIcon: "", //按钮图标
        fEncode: "", //按钮编码
        fFullname: "", //按钮名称
        fOrder: "", //
      }, //按钮Btn
      //按钮Btn
      ruleBtn: {
        fEncode: [
          { required: true, message: "请输入按钮编码", trigger: "blur" },
        ],
        fFullname: [
          { required: true, message: "请输入按钮名称", trigger: "blur" },
        ],
        fOrder: [
          { required: true, message: "请输入排序号", trigger: "blur" },
          { type: "number", message: "年龄必须为数字值" },
        ],
      },

      companyTree: "", //所有数据
      fParentName: "", //父级名称

      formLabelWidth: "80px",
      treeData: [], //左侧树
      treeCompanyid: "", //点击机构树带出id

      // 左侧机构树
      defaultProps: {
        children: "children",
        label: "fFullname",
      },
      dialogVisible: false,
      companyId: null,
    };
  },

  mounted() {
    this.getHeight();

    this.getTree();
  },

  watch: {},
  destroyed() {
    sessionStorage.removeItem("treeId");
    sessionStorage.removeItem("expandedKeys");
  },
  methods: {
    // 模块性质
    targetChnage(e) {
      if (e == "iframe") {
        this.prevStr = true;
        this.nextStr = false;
        this.saveStr = true;
      } else {
        this.prevStr = true;
        this.nextStr = true;
        this.saveStr = false;
      }
    },

    next() {
      this.$refs.formData.validate(async (valid) => {
        if (valid) {
          if (this.active++ > 1) this.active = 2;
          this.actives = 2;

          this.prevStr = false;
          this.nextStr = true;
          this.saveStr = false;
        } else {
          this.$message.error("请填写必填项");
          return false;
        }
      });
    },
    prev() {
      this.active = 1;
      this.actives = 1;
      this.prevStr = true;
      this.nextStr = false;
    },
    // 获取页面容器高度
    getHeight() {
      var h = document.documentElement.clientHeight; //获取页面可见高度
      // var w = document.documentElement.clientWidth; //获取页面可见高度
      this.dialogHeight = h * 0.6 + "px";
      this.systemTableHeight = h * 0.45 + "px";
      this.dialogBtnHeight = h * 0.3 + "px";
    },
    // 点击左侧机构树
    handleNodeClick(data) {
      this.showName = data.fFullname; //顶部显示机构名
      this.fModuleid = data.fModuleid;
      this.getBaseModuleList(data.fModuleid);

      this.expandedKeys = [data.fModuleid];
      this.itemModuleid = "";
      this.formData.fParentid = data.fModuleid;
      sessionStorage.setItem("expandedKeys", JSON.stringify(this.expandedKeys));
      sessionStorage.setItem("treeId", data.fModuleid);
    },
    // 左侧树结构
    getTree() {
      getBaseModuleList({
        fModuleid: "",
      })
        .then((res) => {
          if (res.errcode == 0) {
            var companyTree = res.data.baseModuleList;
            this.treeData = this.tranListToTreeData(companyTree);

            var id;
            if (
              sessionStorage.getItem("treeId") != null &&
              sessionStorage.getItem("treeId") != ""
            ) {
              id = sessionStorage.getItem("treeId");
            } else {
              id = "0";
            }
            this.getBaseModuleList(id);
            this.expandedKeys = [this.treeData[0].fModuleid];
            this.expandedKeys = JSON.parse(
              sessionStorage.getItem("expandedKeys")
            );
            this.$nextTick(() => {
              this.$refs.tree.setCurrentKey(sessionStorage.getItem("treeId"));
            });
          } else {
            this.$message.error(res.msg);
            return false;
          }
        })
        .catch(() => {
          return false;
        });
    },
    getBaseModuleList(id) {
      var datas = {
        fModuleid: id,
      };
      this.loading = true;
      getBaseModuleList(datas)
        .then((res) => {
          if (res.errcode == 0) {
            this.loading = false;
            this.dialogTableVisible = false;
            var companyTree = res.data.baseModuleList;
            this.tableData = this.tranListToTreeData(companyTree);
          } else {
            this.$message.error("功能目录列表", res.msg);
            this.loading = false;
            return false;
          }
        })
        .catch(() => {
          console.log("功能目录列表");
          this.loading = false;
          return false;
        });
    },
    tranListToTreeData(data) {
      let result = [];
      if (!Array.isArray(data)) {
        return result;
      }
      // 清除已存在的children 重新赋值
      data.forEach((item) => {
        delete item.children;
      });

      let map = {};
      data.forEach((item) => {
        map[item.fModuleid] = item;
      });

      data.forEach((item) => {
        let parent = map[item.fParentid];
        if (parent) {
          (parent.children || (parent.children = [])).push(item);
        } else {
          result.push(item);
        }
      });
      return result;
    },

    // 点击当前行
    getRowInfo(e) {
      this.itemModuleid = e.fModuleid;
    },

    // 获取系统功能详情
    getAdd(status) {
      if (status == 1) {
        this.active = 2;
        this.actives = 1;
        this.editDialog = "编辑功能";
        if (this.itemModuleid != null && this.itemModuleid != "") {
          this.dialogTableVisible = true;
          this.loadingDialog = true;
          getBaseModuleDetail({ fModuleid: this.itemModuleid })
            .then((res) => {
              if (res.errcode == 0) {
                this.active = 1;
                this.nextStr = false;
                this.loadingDialog = false;
                this.formData = res.data.lrBaseModule;
                if (this.formData.fTarget == "expand") {
                  this.prevStr = true;
                  this.nextStr = true;
                  this.saveStr = false;
                } else {
                  this.prevStr = true;
                  this.nextStr = false;
                  this.saveStr = false;
                }
              } else {
                this.$message.error("编辑功能", res.msg);
                this.loadingDialog = false;
              }
            })
            .catch((error) => {
              console.log("编辑功能", error);
              this.loadingDialog = false;
            });
        } else {
          return this.$message.error("请先选择需要编辑的机构");
        }
      } else if (status == 0) {
        this.editDialog = "新增功能";
        // this.formData.fParentid = this.fModuleid//上级id
        this.dialogTableVisible = true;

        this.formData = {
          fModuleid: "", //模块主键id
          fParentid: this.fModuleid, //上级id
          fEncode: "", //模块编码
          fFullname: "", //模块名称
          fIcon: "", //模块图标
          fTarget: "", //模块性质  iframe  expand
          fAllowedit: "", //是否是编辑页
          fAllowdelete: "", //是否启用
          fOrder: "", //排序号
          fNote: "",

          modulebuttonList: [
            //按钮数据集合
            // {
            //     fModulebuttonid: "",//按钮主键id
            //     fModuleid: "",//模块主键id
            //     fIcon: "",//按钮图标
            //     fEncode: "",//按钮编码
            //     fFullname: "",//按钮名称
            //     fOrder: "",//排序号
            // }
          ],
        };
        this.active = 1;
        this.actives = 1;
      }
    },
    leftNameDataData(val, fEncode, fFullname) {
      let list = [];
      if (!Array.isArray(val)) {
        return list;
      }
      list = val.map((item) => {
        if (item.children.length > 0) {
          this.leftNameDataData(item.children, fEncode, fFullname);
        }

        if (item.name == fEncode) {
          item.title = fFullname;
        }
        return item;
      });

      return list;
    },

    //  确认修改： 新增修改
    submitForm() {
      var leftNameData = this.$store.state.leftNameData;
      if (this.formData.fTarget == "iframe") {
        // this.$refs.formData.validate(async (valid) => {
        // if (valid) {
        var data = [];
        this.formData.modulebuttonList.map((item) => {
          data.push({
            fEncode: item.fEncode,
            fFullname: item.fFullname,
            fIcon: item.fIcon,
            fModulebuttonid: item.fModulebuttonid,
            fModuleid: item.fModuleid,
            fOrder: item.fOrder,
          });
        });
        this.formData.modulebuttonList = [];
        this.formData.modulebuttonList = data;

        this.formData.fParentid =
          JSON.parse(sessionStorage.getItem("expandedKeys"))[0] || 0;
        getBaseModuleAdd(this.formData)
          .then((res) => {
            if (res.errcode == 0) {
              this.leftNameDataData(
                leftNameData,
                this.formData.fEncode,
                this.formData.fFullname
              );
              this.getBaseModuleList(this.formData.fParentid);
              this.getTree();
              this.$message.success("新增成功");
            } else {
              this.$message.error("确认修改/新增修改", res.msg);
            }
          })
          .catch((error) => {
            console.log("确认修改/新增修改", error);
          });
      } else if (this.formData.fTarget == "expand") {
        this.$refs.formData.validate(async (valid) => {
          if (valid) {
            var data = [];
            this.formData.modulebuttonList.map((item) => {
              data.push({
                fEncode: item.fEncode,
                fFullname: item.fFullname,
                fIcon: item.fIcon,
                fModulebuttonid: item.fModulebuttonid,
                fModuleid: item.fModuleid,
                fOrder: item.fOrder,
              });
            });
            this.formData.modulebuttonList = [];
            this.formData.modulebuttonList = data;

            // this.formData.fParentid = JSON.parse(sessionStorage.getItem('expandedKeys'))[0] || 0;
            getBaseModuleAdd(this.formData)
              .then((res) => {
                if (res.errcode == 0) {
                  // this.$store.state.leftNameData
                  // //
                  this.leftNameDataData(
                    leftNameData,
                    this.formData.fEncode,
                    this.formData.fFullname
                  );
                  this.getBaseModuleList(this.formData.fParentid);
                  this.getTree();
                  this.$message.success("新增成功");
                } else {
                  this.$message.error("新增失败", res.msg);
                }
              })
              .catch((error) => {
                console.log("新增失败", error);
              });
          } else {
            this.$message.error("请填写必填项");
            return false;
          }
        });
      }
    },
    // 重置
    resetForm() {
      this.$refs.formData.resetFields();
    },
    // 删除
    rowDelete(id) {
      if (id != "" && id != null) {
        this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.loading = true;
            getBaseModuleDelete({ fModuleid: id })
              .then((res) => {
                if (res.errcode == 0) {
                  this.getBaseModuleList(this.fModuleid);
                  this.getTree();
                  this.$message.success("删除成功");
                  this.loading = false;
                } else {
                  this.$message.error("删除失败", res.msg);
                  this.loading = false;
                }
              })
              .catch(() => {
                console.log("删除失败");
                this.loading = false;
              });
          })
          .catch(() => {
          this.$message("取消删除");
          });
      } else {
        return this.$message.error("请先选择需要删除的数据");
      }
    },
    // 系统按钮点击获取当前数据id
    getRowBtnInfo(row) {
      this.rowBtnNum = row.index;

      this.formBtnRowData = row;
      // Btn 编码
      this.BtnDetailId = row.fEncode;
    },
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },
    // 系统按钮保存
    submitBtnForm() {
      if (this.formData.modulebuttonList.length != 0) {
        this.formBtnData.fModuleid = this.fModuleid;
        var str = this.formData.modulebuttonList.filter((item) => {
          return item.fEncode == this.formBtnData.fEncode;
        });
        var that = this;

        if (this.addNum == 0) {
          //新增
          if (str.length != 0) {
            //点击
            that.savaBtn = true;
            this.$message.warning("按钮编码不能重复");
          } else {
            that.savaBtn = false;
            this.validateBtn();
          }
        } else if (this.addNum == 1) {
          //编辑
          if (str.length != 0) {
            //点击
            if (this.formBtnRowData.fEncode != this.formBtnData.fEncode) {
              that.savaBtn = true;
              this.$message.warning("按钮编码不能重复");
            } else {
              that.savaBtn = false;
              this.validateBtn();
            }
          } else {
            that.savaBtn = false;

            this.validateBtn();
          }
        }
      } else {
        this.validateBtn();
      }
    },
    validateBtn() {
      this.$refs.formBtnData.validate(async (valid) => {
        if (valid) {
          // this.rowBtnNum
          if (this.addNum == 0) {
            var formBtnDatas = this.formBtnData;
            this.formBtnData = {
              fModulebuttonid: "", //按钮主键id
              fModuleid: "", //模块主键id
              fIcon: "", //按钮图标
              fEncode: "", //按钮编码
              fFullname: "", //按钮名称
              fOrder: "", //
            };

            this.formData.modulebuttonList.push(formBtnDatas); //新增
          } else if (this.addNum == 1) {
            this.formData.modulebuttonList[this.rowBtnNum] = this.formBtnData; //编辑
            this.formData.modulebuttonList.push(this.formBtnData);
            this.formData.modulebuttonList.pop();

          }
          this.dialogBtnVisible = false;
        } else {
          this.$message.error("请填写必填项");
          return false;
        }
      });
    },
    // 系统按钮重置
    resetBtnForm() {
      this.$refs.formBtnData.resetFields();
      // this.$refs.formData.resetFields();
    },
    // 系统按钮新增编辑
    getBtnAdd(status) {
      if (status == 1) {
        this.addNum = 1;
        this.editBtnDialog = "编辑按钮";
        if (this.BtnDetailId != null && this.BtnDetailId != "") {
          this.dialogBtnVisible = true;
          this.formBtnData = {
            fModulebuttonid: "", //按钮主键id
            fModuleid: "", //模块主键id
            fIcon: "", //按钮图标
            fEncode: "", //按钮编码
            fFullname: "", //按钮名称
            fOrder: "", //
          };
          this.formBtnData.fEncode = this.formBtnRowData.fEncode;
          this.formBtnData.fFullname = this.formBtnRowData.fFullname;
          this.formBtnData.fOrder = this.formBtnRowData.fOrder;

          // var data = this.formBtnRowData
          // this.formBtnData = data
        } else {
          return this.$message.error("请先选择需要编辑的机构");
        }
      } else if (status == 0) {
        this.addNum = 0;
        this.editBtnDialog = "添加按钮";
        this.formData.fParentid = this.itemModuleid; //上级id
        this.dialogBtnVisible = true;
        this.formBtnData = {
          fModulebuttonid: "", //按钮主键id
          fModuleid: "", //模块主键id
          fIcon: "", //按钮图标
          fEncode: "", //按钮编码
          fFullname: "", //按钮名称
          fOrder: "", //
        };

        // if (this.flagBtn == 2) {
        //     this.$refs.formBtnData.resetFields();
        // }
      }
    },
    // 系统按钮删除
    rowBtnDelete(index) {
      if (index != null) {
        this.formData.modulebuttonList.splice(index, 1);

      } else {
        this.$message.error("请选定需要删除的数据");
      }
    
    },
    // 点击当前行变色
    rowChange(val) {
      this.currentRow = val;
    },
    rowChanges(val) {
      this.currentRow = val;
    },
    // 编码按钮失焦事件
    onBlur(value) {
      var that = this;

      if (this.formData.modulebuttonList.length > 0) {
        var str = this.formData.modulebuttonList.filter((item) => {
          return item.fEncode == value;
        });

        if (this.addNum == 0) {
          //新增
          if (str.length != 0) {
            //点击
            that.savaBtn = true;
            this.$message.warning("按钮编码不能重复");
          } else {
            that.savaBtn = false;
          }
        } else if (this.addNum == 1) {
          //编辑
          if (str.length != 0) {
            //点击
            if (this.formBtnRowData.fEncode != value) {
              that.savaBtn = true;
              this.$message.warning("按钮编码不能重复");
            } else {
              that.savaBtn = false;
            }
          } else {
            that.savaBtn = false;
          }
        }
      }
    },
  },
};
</script>

<style scoped lang="less">
.printTables {
  background: #fff;
  display: flex;
  justify-content: end;
  padding: 5px;
  margin-top: 10px;
}

.text_tables {
  height: 90.3%;
}

.dialogBody {
  padding: 3px 20px;
  height: 80%;
  overflow-y: auto;
  position: relative;
}

.samllDialog {
  display: flex;
  flex-direction: column;
  margin: 0 20px;

  // height: 100%;
  // height: 300px;
  // height: 10%;
  //    calc(100vh-123px)

  // .systemTable {
  //     flex: 1;
  // }
}
a {
  text-decoration: none;
  color: #000;
}
</style>